<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--引入layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

		<script src="/admin/js-css/js/eCharts/echarts.js"></script>

		<link rel="stylesheet" type="text/css" href="/admin/js-css/css/welcome.css" />
		<link rel="stylesheet" href="css/pageLR.css">
		<link rel="icon" href="img/logo.png">
		<title>欢迎</title>
		<style>
			/* 样式重置 */
			html,
			body {
			    margin: 0;
			    padding: 0;
			}
			/*滚动条整体样式*/
			::-webkit-scrollbar {
			    /*高宽分别对应横竖滚动条的尺寸*/
			    width: 6px;
			    height: 10px;
			    background-color: rgba(255, 255, 255, 0.1);
			}
			
			/*滚动条里面滑块*/
			::-webkit-scrollbar-thumb {
			    background: rgba(144, 147, 153, .3);
			    border-radius: 4px;
			    cursor: pointer;
			}

			.de_all{
				cursor: pointer;
			}
		</style>
	</head>

	<body>
	<div id="app">
		<div class="header_all">
			<div class="header_list">
				<div class="de_all" @click="openStat('患者总数','2857')"><img src="/admin/js-css/img/skin_/welcomePNG/kmcs.png" >
					<div data-v-4dc2452e=""><span data-v-4dc2452e="" class="a4">患者总数</span>
						<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{data1.c1}}
								</span></div>
					</div>
				</div>
			</div>
			<div class="header_list">
				<div class="de_all" @click="openStat('今日待回访','2912')"><img src="/admin/js-css/img/skin_/welcomePNG/kmcs.png">
					<div data-v-4dc2452e=""><span data-v-4dc2452e="" class="a4">今日待回访</span>
						<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{data1.c2}}
								</span></div>
					</div>
				</div>
			</div>
			<div class="header_list">
				<div class="de_all"  @click="openStat('今日已回访','3094')" ><img src="/admin/js-css/img/skin_/welcomePNG/kmcs.png">
					<div data-v-4dc2452e=""><span data-v-4dc2452e="" class="a4">今日已回访</span>
						<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{data1.c3}}
								</span></div>
					</div>
				</div>
			</div>


		</div> <!---->
		<div class="header_all">

			<div class="header_list">
				<div class="de_all" @click="openStat('今日未回访','3095')"><img src="/admin/js-css/img/skin_/welcomePNG/kmcs.png">
					<div data-v-4dc2452e=""><span data-v-4dc2452e="" class="a4">今日未回访</span>
						<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{data1.c4}}
								</span></div>
					</div>
				</div>
			</div>
			<div class="header_list">
				<div class="de_all"  @click="openStat('明日待回访','2913')"><img src="/admin/js-css/img/skin_/welcomePNG/kmcs.png">
					<div data-v-4dc2452e=""><span data-v-4dc2452e="" class="a4">明日待回访</span>
						<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{data1.c5}}
								</span></div>
					</div>
				</div>
			</div>
			<div class="header_list">
				<div class="de_all"  @click="openStat('共公回访库','2858')"><img src="/admin/js-css/img/skin_/welcomePNG/kmcs.png">
					<div data-v-4dc2452e=""><span data-v-4dc2452e="" class="a4">共公回访库</span>
						<div data-v-4dc2452e="" class="he_num"><span data-v-4dc2452e="">
									{{data1.c6}}
								</span></div>
					</div>
				</div>
			</div>
		</div> <!---->
		<div class="btb">
			<div class="card_box card_box2">
				<div class="card_header">回访统计</div>
				<div class="card_body disbody">
					<div style="border-right: 1px solid rgb(234, 235, 240);">
						<div id="main4" _echarts_instance_="ec_1709443707184"
							 style="width: 710px; height: 265px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;">
							<div style="position: relative; width: 710px; height: 265px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
								<canvas data-zr-dom-id="zr_0" width="710" height="265"
										style="position: absolute; left: 0px; top: 0px; width: 710px; height: 265px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
							</div>
							<div class=""
								 style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px &quot;Microsoft YaHei&quot;; padding: 10px; top: 0px; left: 0px; transform: translate3d(227px, 89px, 0px); border-color: rgb(255, 255, 255); pointer-events: none; visibility: hidden; opacity: 0;">
								<div style="margin: 0px 0 0;line-height:1;">
									<div style="margin: 0px 0 0;line-height:1;">
										<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">
											2024-02-28
										</div>
										<div style="margin: 10px 0 0;line-height:1;">
											<div style="margin: 0px 0 0;line-height:1;">
												<div style="margin: 0px 0 0;line-height:1;"><span
														style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6;"></span><span
														style="font-size:14px;color:#666;font-weight:400;margin-left:2px">回访统计</span><span
														style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">5</span>
													<div style="clear:both"></div>
												</div>
												<div style="clear:both"></div>
											</div>
											<div style="clear:both"></div>
										</div>
										<div style="clear:both"></div>
									</div>
									<div style="clear:both"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="bodyright" style="width: 100%;">
						<div class="bodytop">
							<div class="count_header">近7天回访总计</div>
							<div class="count_cont">
								<div class="itemcont">
									<div class="wyf">总次数</div>
									<div class="wyfnum">{{data1.c7}}</div>
									<div class="lines"></div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					data1:{},
					div1:[],
					div2:[],
					div3:{}
				}
			},
			created(){
				this.getdata1();
				this.div3LoadLine();
			},
			methods:{
				openStat(title,tableId){
					top.f_layer_open_get("/admin/html/dataManagement/list.html?tableId="+getTableId(tableId), "90%", "80%", function () {

					}, {}, title);
				},
				async getdata1(){
					const res = await postWebCustom(getTableId("3092"),{});
					this.data1 = res.data;
				},
				async getData(){
					const res = await postBody("/admin/api/DataManagementController/welcomePageDataStatistics",{});
					if(res.code == 1){
						if(res.data.url!=undefined && res.data.url!=""){
							window.location.href = res.data.url;
						}else if(res.data.img!=undefined && res.data.img!=""){
							window.location.href = "/admin/html/welcome_not.html?src="+res.data.img
						}else {
							this.div1 = res.data.div1;
							this.div2 = res.data.div2;
							this.div3 = res.data.div3;
							this.$nextTick(function (){
								for(let a=0;a<this.div2.length;a++){
									this.div2LoadPrie(this.div2[a]);
								}
								this.div3LoadLine();
							})
						}
					}
				},
				//div2加载饼状图
				div2LoadPrie(item){
					var chartDom = document.getElementById(item.id);
					var myChart = echarts.init(chartDom);
					var option;
					option = {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							top: '70%',
							left: '50%',
						},
						series: [{
							name: item.series.name,
							type: 'pie',
							radius: '50%',
							center: ['30%', '50%'],
							label: {
								show: false,
								position: 'center'
							},
							data: item.series.data,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					option && myChart.setOption(option);
				},

				//折线图统计
				async div3LoadLine(){
					const res = await postWebCustom(getTableId("3093"),{});
					this.div3 = res.data;
					var chartDom4 = document.getElementById('main4');
					var myChart4 = echarts.init(chartDom4);
					var option4;
					option4 = {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: this.div3.legend
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: this.div3.xAxis
						},
						yAxis: {
							type: 'value'
						},
						series: this.div3.series
					};
					option4 && myChart4.setOption(option4);
				}
			}
		})
	</script>


</html>
